<!DOCTYPE html>
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/public/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/public/css/layui.css" rel="stylesheet">
    <link href="/public/css/font-awesome.css" rel="stylesheet" />
    <!-- bootstrap-table 表格插件样式 -->
    <link href="/public/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link href="/public/js/jqTreeGrid/jquery.treegrid.css" rel="stylesheet" />
    <link href="/public/css/animate.css" rel="stylesheet" />
    <link href="/public/css/style.css" rel="stylesheet" />
    <link href="/public/css/checkbox.css" rel="stylesheet" />
    <link href="/public/js/select/select2.css" rel="stylesheet" />
    <link href="/public/app/css/app-ui.css" rel="stylesheet" />
</head>
<link href="/public/js/jquery-layout/jquery.layout-latest.css" rel="stylesheet" />
<link href="/public/js/jquery-ztree/3.5/css/metro/zTreeStyle.css" rel="stylesheet" />

<body class="gray-bg">
    <div class="ui-layout-west">
        <div class="main-content">
            <div class="box box-main">
                <div class="box-header">
                    <div class="box-title">
                        <i class="fa icon-grid"></i> 组织机构
                    </div>
                    <div class="box-tools pull-right">
                        <a type="button" class="btn btn-box-tool menuItem" href="#" onclick="dept()" title="管理机构">
                            <i class="fa fa-edit"></i>
                        </a>
                        <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;">
                            <i class="fa fa-chevron-up"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠">
                            <i class="fa fa-chevron-down"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新机构">
                            <i class="fa fa-refresh"></i>
                        </button>
                    </div>
                </div>
                <div class="ui-layout-content">
                    <div id="tree" class="ztree"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-div ui-layout-center">
        <div class="row">
            <div class="col-sm-12 select-info">
                <form id="user-form">
                    <input type="hidden" id="deptId" name="deptId">
                    <input type="hidden" id="parentId" name="parentId">
                    <div class="select-list gd">
                        <ul>
                            <li>
                                登录名称：
                                <input type="text" name="loginName" />
                            </li>
                            <li>
                                手机号码：
                                <input type="text" name="phonenumber" />
                            </li>
                            <li>
                                用户状态：
                                <select name="status">
                                    <option value="">所有</option>
                                    <option value="0">正常</option>
                                    <option value="1">停用</option>
                                </select>
                            </li>
                            <li class="time">
                                <label>创建时间： </label>
                                <input type="text" class="layui-input" id="startTime" placeholder="开始时间" name="params[beginTime]" />
                                <span>-</span>
                                <input type="text" class="layui-input" id="endTime" placeholder="结束时间" name="params[endTime]" />
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search($('form').attr('id'))">
                                    <i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-success btn-rounded btn-sm" onclick="$.table.exportExcel($('form').attr('id'))">
                                    <i class="fa fa-download"></i>&nbsp;下载</a>
                                <a class="btn btn-outline btn-success btn-rounded" onclick="$.operate.add()">
                                    <i class="fa fa-plus"></i> 新增
                                </a>
                                <a class="btn btn-outline btn-danger btn-rounded" onclick="$.operate.batRemove()">
                                    <i class="fa fa-trash-o"></i> 删除
                                </a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="col-sm-12 select-info table-striped">
                <table id="bootstrap-table" data-mobile-responsive="true"></table>
            </div>
        </div>
    </div>
    <div>
        <script src="/public/js/jquery/jquery.min.js"></script>
        <script src="/public/js/bootstrap/bootstrap.min.js"></script>

        <!-- bootstrap-table 表格插件 -->
        <script src="/public/js/bootstrap-table/bootstrap-table.min.js"></script>
        <script src="/public/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
        <script src="/public/js/bootstrap-table/extensions/mobile/bootstrap-table-mobile.min.js"></script>
        <script src="/public/js/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
        <!-- jquery-validate 表单验证插件 -->
        <script src="/public/js/validate/jquery.validate.min.js"></script>
        <script src="/public/js/validate/messages_zh.min.js"></script>
        <script src="/public/js/validate/jquery.validate.extend.js"></script>
        <!-- jquery-validate 表单树插件 -->
        <script src="/public/js/jqTreeGrid/jquery.treegrid.min.js"></script>
        <script src="/public/js/jqTreeGrid/jquery.treegrid.extension.js"></script>
        <!-- jquery-export 表格导出插件 -->
        <script src="/public/js/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
        <script src="/public/js/bootstrap-table/extensions/export/tableExport.js"></script>
        <!-- 遮罩层 -->
        <script src="/public/js/blockUI/jquery.blockUI.js"></script>
        <script src="/public/js/layer/layer.min.js"></script>
        <script src="/public/js/layui/layui.js"></script>
        <script src="/public/app/js/common.js?v=2.2.0"></script>
        <script src="/public/app/js/app-ui.js?v=2.2.0"></script>
        <script src="http://tajs.qq.com/stats?sId=62048022"></script>
        <script>
            var ctx = "\/";
        </script>
    </div>
    <script src="/public/js/jquery-layout/jquery.layout-latest.js"></script>
    <script src="/public/js/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script>
    <script>
        var editFlag = "";
        var removeFlag = "";
        var resetPwdFlag = "";
        var datas = [{
            "searchValue": null,
            "createBy": "admin",
            "createTime": "2018-03-16 03:33:00",
            "updateBy": null,
            "updateTime": null,
            "remark": "\u6B63\u5E38\u72B6\u6001",
            "params": null,
            "dictCode": 6,
            "dictSort": 1,
            "dictLabel": "\u6B63\u5E38",
            "dictValue": "0",
            "dictType": "sys_normal_disable",
            "cssClass": "radio radio-info radio-inline",
            "listClass": "primary",
            "isDefault": "Y",
            "status": "0"
        }, {
            "searchValue": null,
            "createBy": "admin",
            "createTime": "2018-03-16 03:33:00",
            "updateBy": null,
            "updateTime": null,
            "remark": "\u505C\u7528\u72B6\u6001",
            "params": null,
            "dictCode": 7,
            "dictSort": 2,
            "dictLabel": "\u505C\u7528",
            "dictValue": "1",
            "dictType": "sys_normal_disable",
            "cssClass": "radio radio-danger radio-inline",
            "listClass": "danger",
            "isDefault": "N",
            "status": "0"
        }];
        var prefix = ctx + "rest/system/user"
        var preurl = ctx + "/admin/system/user"

        $(document).ready(function () {
            $('body').layout({
                west__size: 185
            });
            queryUserList();
            queryDeptTreeDaTa();
        });

        function queryUserList() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: "useredit.html?id={id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                sortName: "create_time",
                sortOrder: "desc",
                modalName: "用户",
                search: false,
                showExport: false,
                columns: [{
                        checkbox: true
                    },
                    {
                        field: 'userId',
                        title: '用户ID'
                    },
                    {
                        field: 'loginName',
                        title: '登录名称',
                        sortable: true
                    },
                    {
                        field: 'userName',
                        title: '用户名称'
                    },
                    {
                        field: 'dept.deptName',
                        title: '部门'
                    },
                    {
                        field: 'email',
                        title: '邮箱',
                        visible: false
                    },
                    {
                        field: 'phonenumber',
                        title: '手机'
                    },
                    {
                        field: 'status',
                        title: '状态',
                        align: 'center',
                        formatter: function (value, row, index) {
                            return $.table.selectDictLabel(datas, value);
                        }
                    },
                    {
                        field: 'createTime',
                        title: '创建时间',
                        sortable: true
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag +
                                '" href="#" onclick="$.operate.edit(\'' + row.userId +
                                '\')"><i class="fa fa-edit"></i>编辑</a> ');
                            actions.push('<a class="btn btn-danger btn-xs ' + removeFlag +
                                '" href="#" onclick="$.operate.remove(\'' + row.userId +
                                '\')"><i class="fa fa-remove"></i>删除</a> ');
                            actions.push('<a class="btn btn-info btn-xs ' + resetPwdFlag +
                                '" href="#" onclick="resetPwd(\'' + row.userId +
                                '\')"><i class="fa fa-key"></i>重置</a>');
                            return actions.join('');
                        }
                    }
                ]
            };
            $.table.init(options);
        }

        function queryDeptTreeDaTa() {
            // 树结构初始化加载
            var setting = {
                    view: {
                        selectedMulti: false
                    },
                    data: {
                        key: {
                            title: "title"
                        },
                        simpleData: {
                            enable: true
                        }
                    },
                    callback: {
                        onClick: function (event, treeId, treeNode) {
                            tree.expandNode(treeNode);
                            $("#deptId").val(treeNode.id);
                            $("#parentId").val(treeNode.pId);
                            $.table.search($('form').attr('id'));
                        }
                    }
                },
                tree, loadTree = function () {
                    $.get(ctx + "rest/system/dept/treeData", function (datas) {
                        var data=JSON.parse(datas).rows;
                        tree = $.fn.zTree.init($("#tree"), setting, data); //.expandAll(true);
                        // 展开第一级节点
                        var nodes = tree.getNodesByParam("level", 0);
                        for (var i = 0; i < nodes.length; i++) {
                            tree.expandNode(nodes[i], true, false, false);
                        }
                        // 展开第二级节点
                        nodes = tree.getNodesByParam("level", 1);
                        for (var i = 0; i < nodes.length; i++) {
                            tree.expandNode(nodes[i], true, false, false);
                        }
                    }, null, null, "正在加载，请稍后...");
                };
            loadTree();

            $('#btnExpand').click(function () {
                tree.expandAll(true);
                $(this).hide();
                $('#btnCollapse').show();
            });
            $('#btnCollapse').click(function () {
                tree.expandAll(false);
                $(this).hide();
                $('#btnExpand').show();
            });
            $('#btnRefresh').click(function () {
                loadTree();
            });
        }

        /*用户管理-部门*/
        function dept() {
            var url = ctx + "rest/system/dept";
            createMenuItem(url, "部门管理");
        }

        /*用户管理-重置密码*/
        function resetPwd(userId) {
            var url = prefix + '/resetPwd/' + userId;
            $.modal.open("重置密码", url, '800', '300');
        }
    </script>
</body>

</html>